<template>
  <div style="height: 100%" class="workspace">
    <el-container
      ref="listWarp"
      style="height: 100%; background-color: #fff"
      v-loading="loading"
    >
      <el-header
        class="toolbar-wap"
        style="
          height: 45px;
          line-height: 45px;
          margin-bottom: 2px;
          position: relative;
        "
      >
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          style="margin: 0 10px"
        >
          <el-tab-pane label="房态模式" name="first"></el-tab-pane>
          <el-tab-pane label="列表展示" name="second"></el-tab-pane>
          <!-- <el-tab-pane label="示意图展示" name="third"></el-tab-pane> -->
        </el-tabs>
        <div
          style="position: absolute; top: 0; right: 0; color: #666"
          v-if="activeName == 'first'"
        >
          <span
            style="margin: 0 10px; cursor: pointer"
            v-for="(item, index) in checkList"
            :key="index"
            @click="handCheck(index)"
            :class="index == tab ? 'active' : ''"
          >
            <svg-icon
              :icon-class="item.icon"
              style="font-size: 13px; margin-right: 3px"
            />
            {{ item.name }}</span
          >
        </div>
        <div
          style="
            position: absolute;
            top: 0;
            right: 10px;
            color: #666;
            width: 570px;
          "
          v-else
        >
          <tool-button
            v-for="button in toolButtons"
            :key="button.text"
            :text="button.text"
            :icon="button.icon"
            :disabled="button.disabled"
            :right-line="button.rightLine"
            :left-line="button.leftLine"
            :title="button.title"
            @buttonClick="toolButtonClick"
          />
          <!--工具条查询-->
          <tool-query
            ref="toolQuery"
            :placeholder="quickQueryFieldName"
            :quickQueryField="quickQueryField"
            list-name="roomList"
            :columns="columns"
            @executeQuery="funExecuteQuery"
            style="width: 300px; float: right"
          />
        </div>
      </el-header>
      <div
        v-if="activeName == 'first'"
        style="width: 100%; overflow: auto; overflow-x: hidden"
        class="aa"
      >
        <div>
          <!-- 晒选区域 -->
          <div style="width: 100%; height: 30px; line-height: 30px">
            <el-col :span="14" style="padding: 10px">
              <el-row :gutter="10">
                <el-col :span="5">
                  <el-select
                    size="small"
                    style="width: 100%"
                    @change="areaChange"
                    class="area"
                    v-model="schoolId"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in schoolList"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                    <div
                      slot="prefix"
                      style="
                        font-size: 12px;
                        line-height: 32px;
                        float: left;
                        width: 30px;
                        font-weight: normal;
                        margin-right: 20px;
                        color: #909399;
                      "
                    >
                      校区:
                    </div>
                  </el-select>
                </el-col>
                <el-col :span="5">
                  <el-select
                    size="small"
                    @change="buildingChange"
                    style="width: 100%"
                    class="area"
                    v-model="buildingId"
                    placeholder="请选择楼宇"
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in buildingAuthList"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                    <div
                      slot="prefix"
                      style="
                        font-size: 12px;
                        line-height: 32px;
                        float: left;
                        width: 30px;
                        font-weight: normal;
                        margin-right: 20px;
                        color: #909399;
                      "
                    >
                      楼宇:
                    </div>
                  </el-select>
                </el-col>
                <el-col :span="5"></el-col>
                <el-col :span="5">
                  <el-select
                    size="small"
                    @change="collegeChange"
                    class="area"
                    style="width: 100%"
                    v-model="collegeId"
                    placeholder="请选择学院"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in collegeList"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                    <div
                      slot="prefix"
                      style="
                        font-size: 12px;
                        line-height: 32px;
                        float: left;
                        width: 30px;
                        font-weight: normal;
                        margin-right: 20px;
                        color: #909399;
                      "
                    >
                      学院:
                    </div>
                  </el-select>
                </el-col>
                <el-col :span="5">
                  <!-- <el-input
                  size="mini"
                  style="width: 100%; margin-right: 15px"
                  placeholder="租户名称/房间号"
                  v-model="searchVal"
                  @change="searchChange"
                >
                  <i slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input> -->
                </el-col>
              </el-row>
            </el-col>
            <el-col
              :span="10"
              style="text-align: right; color: #999999; padding: 10px"
            >
              <div>
                <span
                  >总房间数
                  <span>{{ countObj.countRoom }}</span>
                </span>
                <span style="margin: 0 6px">
                  <span
                    style="
                      display: inline-block;
                      background: #cecece;
                      width: 15px;
                      height: 15px;
                      border-radius: 3px;
                      margin: -2px 5px;
                    "
                  ></span>
                  <span
                    >已住满 <span>{{ countObj.fullRoom }}</span></span
                  >
                </span>
                <span style="margin: 0 6px">
                  <span
                    style="
                      display: inline-block;
                      background: #f79548;
                      width: 15px;
                      height: 15px;
                      border-radius: 3px;
                      margin: -2px 5px;
                    "
                  ></span>
                  <span
                    >未主满<span>{{ countObj.notFull }}</span></span
                  >
                </span>
                <span style="margin: 0 6px">
                  <span
                    style="
                      display: inline-block;
                      background: #4da1ff;
                      width: 15px;
                      height: 15px;
                      border-radius: 3px;
                      margin: -2px 5px;
                    "
                  ></span>
                  <span
                    >空房间 <span>{{ countObj.emptyRoom }}</span></span
                  >
                </span>
                <span style="margin: 0 6px"
                  >空房间床位 <span>{{ countObj.emptyRoomBeds }}</span></span
                >
                <span style="margin: 0 6px"
                  >零星空床位 <span>{{ countObj.empetBeds }}</span></span
                >
                <span
                  style="
                    cursor: pointer;
                    background: #f2f2f2;
                    border-radius: 4px;
                    padding: 5px;
                  "
                  v-if="activeColl.length > 0"
                  @click="toggleUp"
                  >全部收起 <i class="el-icon-arrow-up"></i
                ></span>
                <span
                  style="
                    cursor: pointer;
                    background: #f2f2f2;
                    border-radius: 4px;
                    padding: 5px;
                  "
                  v-if="activeColl.length == 0"
                  @click="toggleDown"
                  >全部展开<i class="el-icon-arrow-down"></i
                ></span>
              </div>
            </el-col>
          </div>
          <div style="width: 100%; height: 100%">
            <!-- 内容区域 -->
            <div
              style="width: auto; margin-top: 5px; padding: 10px; height: 100%"
              v-if="roomList.length > 0"
            >
              <el-collapse v-model="activeColl">
                <el-collapse-item
                  v-for="(item, index3) in roomList"
                  :key="index3"
                  ref="room"
                  :name="item.floor"
                  class="floorName"
                >
                  <template slot="title">
                    <div
                      style="
                        width: 100%;
                        background: #f3f4f9;
                        height: 40px;
                        line-height: 40px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      "
                    >
                      <img
                        src="../../../assets/img/lc.png"
                        alt=""
                        style="margin-left: 10px"
                      />
                      <span
                        style="
                          margin: 0 10px;
                          font-weight: bold;
                          color: #333333;
                        "
                      >
                        {{ item.floor }}层</span
                      >
                      <!-- 一致性 Consistency<i class="header-icon el-icon-info"></i> -->
                      <span class="title">
                        <span>总房间</span><span>{{ item.totalRoom }}</span>
                      </span>
                      <span class="title"
                        ><span>空房间</span
                        ><span>{{ item.emptyRoom }}</span></span
                      >
                      <span class="title"
                        ><span>空房间床位数</span
                        ><span>{{ item.emptyRoomBedsCount }}</span></span
                      >
                      <span class="title"
                        ><span>零星床位数</span
                        ><span>{{ item.notUseBedsCount }}</span></span
                      >
                      <span
                        style="margin: 0 10px; color: #999999"
                        v-for="(item1, index) in item.collegeList"
                        :key="index"
                      >
                        {{ item1.collegeName }}
                      </span>
                    </div>
                  </template>
                  <div v-if="tab == '0'" ref="floor">
                    <div
                      style="
                        width: 182px;
                        height: 93px;
                        padding: 5px;
                        border-radius: 5px;
                        float: left;
                        margin: 5px;
                        color: #fff;
                        cursor: pointer;
                      "
                      :class="toggleClass(item2.status, index3, index2)"
                      class="content"
                      ref="house"
                      v-for="(item2, index2) in item.roomList"
                      :key="index2"
                    >
                      <!-- :style="toggleClass(item2.status, index3, index2)" -->

                      <!-- @click="evtHouseInfo(item)" -->

                      <el-popover placement="right-end" trigger="click">
                        <el-table
                          :data="
                            item2.stuInfo.filter((r) => r.studentName != null)
                          "
                          :show-header="false"
                        >
                          <el-table-column type="index" width="30">
                          </el-table-column>
                          <el-table-column width="70" property="studentName">
                            <template slot-scope="scope">
                              <el-button
                                type="text"
                                v-if="scope.row.studentName === '点击入住'"
                                @click="stuRoomIn(scope.row)"
                                >点击入住</el-button
                              >
                              <el-button
                                type="text"
                                v-else
                                @click="stuRoomInDetail(scope.row)"
                                >{{ scope.row.studentName }}</el-button
                              >
                            </template></el-table-column
                          >
                          <el-table-column
                            show-overflow-tooltip
                            width="120"
                            property="collegeName"
                          ></el-table-column>
                          <el-table-column
                            show-overflow-tooltip
                            width="100"
                            property="className"
                          ></el-table-column>
                          <el-table-column width="50" property="sex">
                            <template slot-scope="scope">
                              <span v-if="scope.row.sex === '0'">女</span>
                              <span v-if="scope.row.sex === '1'">男</span>
                            </template>
                          </el-table-column>
                        </el-table>
                        <div slot="reference">
                          <div
                            style="
                              margin-left: 15px;
                              font-size: 18px;
                              margin-top: 5px;
                            "
                          >
                            {{ item2.name }}
                          </div>
                          <div style="margin-left: 15px; margin-top: 2px">
                            <svg-icon
                              icon-class="users"
                              style="font-size: 13px; margin-right: 3px"
                            />
                            {{ item2.live }}/{{ item2.needLive }}
                            <span
                              style="margin-left: 10px; margin-top: -16px"
                              v-if="item2.pending == '1'"
                            >
                              <svg-icon
                                icon-class="dbl"
                                style="font-size: 18px; margin-right: 3px"
                              />
                            </span>
                          </div>
                          <div
                            style="
                              margin-left: 15px;
                              margin-top: 6px;
                              font-size: 12px;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              white-space: nowrap;
                            "
                          >
                            {{ item2.collages }}
                          </div>
                        </div>
                      </el-popover>
                    </div>
                  </div>
                  <div v-else ref="floor">
                    <div
                      style="
                        width: 140px;
                        height: 141px;
                        padding: 5px;
                        border-radius: 5px;
                        float: left;
                        margin: 5px;
                        color: #fff;
                        cursor: pointer;
                      "
                      :class="toggleClassJian(item3.status, index)"
                      class="content"
                      ref="house1"
                      v-for="(item3, index) in item.roomListChuang"
                      :key="index"
                    >
                      <!-- @click="evtHouseInfo(item)" -->

                      <el-popover placement="right-end" trigger="hover">
                        <el-table
                          :data="item3.stuInfo.filter((r) => r.id != '')"
                          :show-header="false"
                        >
                          <el-table-column type="index" width="30">
                          </el-table-column>
                          <el-table-column
                            width="60"
                            property="studentName"
                          ></el-table-column>
                          <el-table-column
                            show-overflow-tooltip
                            width="120"
                            property="collegeName"
                          ></el-table-column>
                          <el-table-column
                            show-overflow-tooltip
                            width="100"
                            property="className"
                          ></el-table-column>
                          <el-table-column width="50" property="sex">
                            <template slot-scope="scope">
                              <span v-if="scope.row.sex == '0'">女</span>
                              <span v-else>男</span>
                            </template>
                          </el-table-column>
                        </el-table>
                        <div slot="reference">
                          <div
                            style="
                              margin-left: 30px;
                              font-size: 18px;
                              margin-top: 7px;
                            "
                          >
                            {{ item3.name }}
                          </div>
                          <el-row>
                            <el-col
                              style="text-align: left; text-indent: 5px"
                              :span="12"
                              v-for="(item, index) in item3.stuInfo"
                              :key="index"
                              @click.native.stop="getStuInfo(item)"
                            >
                              <span>{{ index }}</span> {{ item.studentName }}
                            </el-col>
                          </el-row>
                        </div>
                      </el-popover>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div
              v-else
              style="
                width: 100%;
                height: calc(100% - 55px);
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <img src="../../../assets/img/empty.png" alt srcset />
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="activeName == 'second'"
        style="width: 100%; height: 100%; overflow: auto; overflow-x: hidden"
      >
        <tableList ref="list"></tableList>
      </div>
    </el-container>
    <div v-if="activeName == 'first'" style="position: absolute; right: 25px; top: calc(50% - 90px)">
      <p
        v-for="(item, index) in floorList"
        :key="index"
        @click.stop="handFied(index)"
      >
        <span
          class="tag"
          style="
            display: inline-block;
            width: 25px;
            height: 25px;
            border: 2px solid;
            line-height: 25px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            border-color: #999;
            color: #666;
            position: relative;
            z-index: 999;
          "
          >{{ item }}</span
        >
      </p>
    </div>
    <editInfo ref="editInfo" @funLoadList="funGetList"></editInfo>
     <!--导出-->
    <export-excel
      ref="exportExcel"
      :sheet-name="sheetName"
      :file-name="exportFileName"
      :columns="columns"
      :rows="totalRows"
      :query="QueryCriteria"
      :export-api="exportApi"
    />
    <!--导入数据窗口-->
    <el-dialog
      :title="'导入用户基本数据'"
      :visible.sync="importDialog"
      :close-on-click-modal="false"
      lock-scroll
      append-to-body
      destroy-on-close
      fullscreen
      class="fullscreenDialog"
    >
      <import-excel
        ref="importDialog"
        :api-import-data-validate="apiImportDataValidate"
        :api-import-data="apiImportData"
        :import-query-filed="importQueryFiled"
        :import-target-data="importTargetData"
        :import-type="2"
        @finish="evtImportFinish"
        @close="
          () => {
            this.importDialog = false;
            this.$refs.importDialog.clearData;
          }
        "
      ></import-excel>
    </el-dialog>
  </div>
</template>

<script>
import $ from "jquery";
import { apiDepartments } from "@/api/basicData/departments";
import { isNumber } from "@/itsoftUI/utils/validate";
import { getPremission } from "@/itsoftUI/auth/permission";
import { apiStudentInfo } from "@/api/basicData/studentInfo";
import { apiTrainingLevel } from "@/api/basicData/trainingLevel";
import { apiProfessional } from "@/api/basicData/professional";
import { apiClassInfo } from "@/api/basicData/classInfo";
import { apiIndex } from "@/api/accommodation/index";
import { apiBuilding } from "@/api/basicData/building";
import editInfo from "@/views/accommodation/home/editInfo";
import tableList from "@/views/accommodation/home/tableList";
import toolButton from "@/itsoftUI/components/toolbar/toolbutton";
import toolQuery from "@/itsoftUI/components/toolbar/toolquery";
import { apiBedInfo } from "@/api/basicData/bedInfo";
import exportExcel from "@/itsoftUI/components/exportExcel/exportExcel";
import importExcel from "@/itsoftUI/components/importExcel/importExcel";
export default {
  components: {
    tableList,
    editInfo,
    toolButton,
    toolQuery,
    exportExcel,
    importExcel,
  },
  data() {
    return {
      //导入
      importDialog: false,
      //导入数据验证方法
      apiImportDataValidate: apiIndex.ImportStayInfoValidate,
      //导入数据验证方法
      apiImportData: apiIndex.ImportStayInfo,
      importQueryFiled: {},
      importTargetData: [],
      sheetName: "全部",
      exportApi: apiIndex.List,
      exportFileName: "住宿信息",
      QueryCriteria: {},
      quickQueryFieldName: "姓名",
      quickQueryField: "studentName",
      checkList: [
        { id: "0", name: "简易模式", icon: "jy" },
        { id: "1", name: "床位模式", icon: "cw" },
      ],
      totalRows: 0,
      queryList: [],
      toolButtons: [
        {
          text: "批量退宿",
          icon: "shuaxin",
          auth: "030105",
          rightLine: true,
        },
        {
          text: "导出",
          auth: "030106",
          icon: "daochu",
        },
        {
          text: "导入",
          auth: "030106",
          icon: "daoru",
        },
      ],
      columns: [
        {
          prop: "areaName",
          label: "校区",
          sortable: false,
          align: "left",
          visible: true,
          tooltip: true,
          width: 200,
          max: 100,
        },
        {
          prop: "buildingName",
          label: "楼宇",
          align: "center",
          sortable: true,
          visible: true,
          tooltip: true,
          max: 100,
          width: 150,
        },
        {
          prop: "floor",
          label: "楼层",
          sortable: true,
          align: "center",
          visible: true,
          tooltip: true,
          max: 100,
          width: 80,
        },
        {
          prop: "roomName",
          label: "房间号",
          sortable: true,
          align: "center",
          visible: true,
          tooltip: true,
          max: 100,
          width: 120,
        },
        {
          prop: "bedName",
          label: "床位",
          sortable: true,
          visible: true,
          align: "center",
          tooltip: true,
          max: 100,
          width: 120,
        },
        {
          prop: "studentName",
          label: "住宿学生姓名",
          sortable: false,
          visible: true,
          align: "center",
          tooltip: true,
          max: 100,
          width: 120,
        },
        {
          prop: "account",
          label: "学号",
          sortable: false,
          visible: true,
          align: "center",
          tooltip: true,
          max: 100,
          width: 150,
        },
        {
          prop: "sex",
          label: "性别",
          sortable: false,
          visible: true,
          align: "left",
          tooltip: true,
          width: 60,
          max: 100,
        },
        {
          prop: "trainingLevelName",
          label: "培养层次",
          sortable: false,
          visible: true,
          align: "left",
          tooltip: true,
          width: 120,
          max: 100,
        },
        {
          prop: "grade",
          label: "年级",
          sortable: false,
          visible: true,
          align: "left",
          tooltip: true,
          width: 120,
          max: 100,
        },
        {
          prop: "collegeName",
          label: "学院",
          sortable: false,
          visible: true,
          align: "left",
          tooltip: true,
          width: 180,
          max: 100,
        },
        {
          prop: "majorName",
          label: "专业",
          sortable: false,
          visible: true,
          align: "left",
          tooltip: true,
          width: 140,
          max: 100,
        },
        {
          prop: "className",
          label: "班级",
          sortable: false,
          visible: true,  
          align: "left",
          tooltip: true,
          width: 140,
          max: 100,
        },
        {
          prop: "price",
          label: "床位费用",
          sortable: false,
          visible: true,
          align: "left",
          tooltip: true,
          width: 100,
          max: 100,
        },
      ],
      tab: "0",
      activeName: "first",
      activeColl: [],
      floorList: [],
      areaName: "",
      schoolId: "",
      schoolList: [],
      roomList: [], //房态
      countObj: {},
      buildingAuthList: [],
      collegeList: [], //院系
      collegeId: "",
      heightList: [],
      buildingId: "",
      loading: false,
      bannerimg: "../../../assets/img/welcome.png",

      list: [],
      roomStatusList: [
        { id: 1, name: "全部" },
        { id: 2, name: "租赁中" },
        { id: 3, name: "空闲中" },
        { id: 4, name: "租赁到期" },
      ],
      roomStatus: 1,
    };
  },
  updated() {},
  methods: {
    toolButtonClick(text) {
      switch (text) {
        case "批量退宿":
          this.$refs.list.funcheckOut();
          break;
        case "导出":
          this.totalRows = this.$refs.list.totalRows;
          this.QueryCriteria = this.$refs.list.condition;
          this.$refs.exportExcel.exportOpen();
          break;
        case "导入":
          this.evtImport();
          break;
      }
    },
    //获取导入字段
    funImportList() {
      let search = [
        {
          andOr: "and",
          searchField: "useWay",
          operator: "=",
          searchValue: "stayInfo",
        },
      ];
      apiStudentInfo
        .ImportList(JSON.stringify(search), "orderNum asc")
        .then((res) => {
          this.importTargetData = res.data;
        });
    },
    //导入
    evtImport() {
      this.importDialog = true;
    },
    //导入完成
    evtImportFinish() {
      this.importDialog = false;
      this.$refs.list.funLoadList();
    },
    //执行查询
    funExecuteQuery(val) {
      this.queryList = [];
      let that = this;
      if (val) {
        val.forEach(function (item) {
          that.queryList.push(item);
        });
      }
      this.$refs.list.condition = this.queryList;
      this.$refs.list.funLoadList();
    },
    stuRoomIn(item) {
      this.$refs.editInfo.FormVisible = true;
      this.$refs.editInfo.formData = JSON.parse(JSON.stringify(item));
      this.$refs.editInfo.bedsId = item.bedsId;
      this.$refs.editInfo.studentId = item.studentId;
      this.$refs.editInfo.type = 1;
      this.getBedsInfo(item.bedsId);
    },
    getBedsInfo(id) {
      apiBedInfo.GetBedInfo(id).then((res) => {
        this.$refs.editInfo.bedsInfo = res.data;
      });
    },
    stuRoomInDetail(item) {
      this.$refs.editInfo.FormVisible = true;
      this.$refs.editInfo.loading = true;
      this.$refs.editInfo.type = 2;
      apiStudentInfo.Get(item.studentId).then((res) => {
        this.$refs.editInfo.formData = res.data;
        this.$refs.editInfo.bedsId = res.data.bedsId;
        this.$refs.editInfo.imageUrl = res.data.photo;
        this.$refs.editInfo.studentId = res.data.id;

        this.getBedsInfo(item.bedsId);

        let condition = [];
        let condition1 = [];
        condition = [
          {
            andOr: "and",
            searchField: "collegeId",
            operator: "=",
            searchValue: res.data.collegeId,
          },
        ];

        apiProfessional.List(JSON.stringify(condition)).then((res) => {
          if (res.status == "success") {
            this.$refs.editInfo.majorList = res.data;
          }
        });

        if (res.data.majorId) {
          apiClassInfo.GradeList(res.data.majorId).then((res) => {
            this.$refs.editInfo.gradeList = res.data;
          });
        }
        condition1 = [
          {
            andOr: "and",
            searchField: "majorId",
            operator: "=",
            searchValue: res.data.majorId,
          },
          {
            andOr: "and",
            searchField: "grade",
            operator: "=",
            searchValue: res.data.gradeId,
          },
        ];
        apiClassInfo.List(JSON.stringify(condition1)).then((res) => {
          if (res.status == "success") {
            this.$refs.editInfo.classList = res.data;
          }
        });
        this.$refs.editInfo.loading = false;
      });
    },
    //获取房间详情
    getStuInfo() {
      this.$refs.editInfo.FormVisible = true;
    },
    toggleUp() {
      this.activeColl = [];
    },
    toggleDown() {
      this.roomList.forEach((r) => {
        if (r.roomList.length > 0) {
          this.activeColl.push(r.floor);
        }
      });
    },
    handFied(index) {
      this.$nextTick(() => {
        $(".aa").animate(
          {
            scrollTop: this.heightList[index] - 250,
          },
          500
        );
      });
    },
    //房态切换
    handCheck(index) {
      this.tab = index;
    },
    //获取校区
    funLoadAreaList() {
      apiIndex.AreaList().then((res) => {
        this.schoolList = res.data;
        this.getBuilding();
      });
    },
    //院系
    funcollegeList() {
      apiDepartments.List().then((res) => {
        if (res.status == "success") {
          this.collegeList = res.data;
        }
      });
    },
    // 住宿管理房态模式页面展示统计
    funGetBuildingDetails(buildingId) {
      apiIndex.GetBuildingDetails(buildingId).then((res) => {
        this.countObj = res.data;
      });
    },
    //列表
    funGetList() {
      this.loading = true;
      this.activeColl = [];
      this.floorList = [];
      this.heightList = [];
      let showEmpty = "1";
      apiIndex
        .GetList(this.buildingId, this.collegeId, showEmpty)
        .then((res) => {
          if (res.status == "success") {
            this.roomList = res.data;

            this.roomList.forEach((r) => {
              if (r.roomList.length > 0) {
                this.activeColl.push(r.floor);
                this.floorList.push(r.floor);
              }
              r.roomListChuang = r.roomList;
              r.roomListChuang.forEach((k) => {
                // let size = k.needLive - k.live;
                // for (let i = 0; i < size; i++) {
                //   k.stuInfo.push({
                //     id: "",
                //     studentName: "空床位",
                //   });
                // }
                k.stuInfo.forEach((t) => {
                  if (t.studentId == null) {
                    t.studentName = "空床位";
                  }
                });
              });
            });
            this.$nextTick(() => {
              this.$refs.floor.forEach((r) => {
                this.heightList.push(r.getBoundingClientRect().top);
              });
            });
            this.funGetBuildingDetails(this.buildingId);
            this.loading = false;
          }
        });
    },
    getBuilding() {
      let search = [];
      search = [
        {
          andOr: "and",
          searchField: "areaId",
          operator: "=",
          searchValue: this.schoolId,
        },
      ];
      // search, fields, order, page
      apiBuilding.List(JSON.stringify(search)).then((res) => {
        if (res.errorCode === 0) {
          this.buildingAuthList = res.data;
        }
      });
    },

    // //楼宇下拉
    // funloadBuildList() {
    //   apiAccommodation.buildingAuthList().then((res) => {
    //     if (res.status == "success") {
    //       this.buildingAuthList = res.data;
    //       this.buildingName = this.buildingAuthList[0].name;
    //     }
    //   });
    // },
    //区域下拉

    //房间入住详情
    evtHouseInfo(item) {
      this.$refs.editInfo.FormVisible = true;

      this.$refs.editInfo.roomInId = item.roomInId;
      this.$refs.editInfo.roomId = item.roomId;
      this.$refs.editInfo.funLoadUserTenant();

      if (item.roomInId != "") {
        this.$refs.editInfo.loading = true;
        apiAccommodation.GetDetailByRoomInId(item.roomInId).then((res) => {
          if (res.status == "success") {
            this.$refs.editInfo.tableInfoData = res.data.contractList;
            this.$refs.editInfo.formData = res.data;
            this.$refs.editInfo.funLoadTenant();
            this.$refs.editInfo.loading = false;
          }
        });
      } else {
        this.$refs.editInfo.formData.tempStatus = item.tempStatus;
        this.$refs.editInfo.formData.infoId = item.infoId;
        this.$refs.editInfo.formData.areaName = item.areaName;
        this.$refs.editInfo.formData.buildName = item.buildName;
        this.$refs.editInfo.formData.roomNum = item.roomNum;
        // this.$refs.editInfo.funLoadUserTenant();
        // this.$refs.editInfo.funLoadTenant();
      }
    },
    handleClick() {
      // if (this.activeName == "second") {
      //   this.columns = this.$refs.list.columns;
      // }
      this.funGetList();
    },
    //区域change
    areaChange(val) {
      this.buildingId = "";
      this.getBuilding(val);
    },

    collegeChange(val) {
      this.funGetList();
    },
    //楼宇change
    buildingChange(val) {
      this.funGetBuildingDetails(val);
      this.funGetList();
    },

    //动态切换背景图片
    toggleClass(status, index, index2) {
      if (status == "0") {
        return "bgc";
      } else if (status == "1") {
        return "bgc1";
      } else {
        return "bgc2";
      }
    },
    //动态切换背景图片
    toggleClassJian(status, index) {
      if (status == "0") {
        return "bg";
      } else if (status == "1") {
        return "bg1";
      } else {
        return "bg2";
      }
    },
    handleScrollx() {
      // console.log("滚动高度", window.pageYOffset);
      // console.log(
      //   "距离顶部高度",
      //   this.$refs.pronbit.getBoundingClientRect().top
      // );
    },
  },
  created() {
    this.schoolId = this.$route.query.areaId;
    this.buildingId = this.$route.query.buildingId;
    this.funLoadAreaList();
    getPremission(this.toolButtons);
    this.funcollegeList();
    this.funGetList();
    this.funImportList();
  },
  mounted() {
    window.addEventListener("scroll", this.handleScrollx, true);
  },
};
</script>
<style lang="scss" scoped>
.workspace {
  position: relative;
  z-index: 1;
  .bgc {
    background-image: url("../../../assets/img/wuren.png");
    background-size: 100% 100%;
  }
  .bgc1 {
    background-image: url("../../../assets/img/manfang.png");
    background-size: 100% 100%;
  }
  .bgc2 {
    background-image: url("../../../assets/img/weiman.png");
    background-size: 100% 100%;
  }
  .bg {
    background-image: url("../../../assets/img/kf.png");
    background-size: 100% 100%;
  }
  .bg1 {
    background-image: url("../../../assets/img/mf.png");
    background-size: 100% 100%;
  }
  .bg2 {
    background-image: url("../../../assets/img/wm.png");
    background-size: 100% 100%;
  }
  .active {
    color: #3a84ef !important;
  }
  .title {
    margin: 0 10px;

    span {
      &:first-child {
        color: #666666;
      }
      &:last-child {
        margin: 0 10px;
        font-size: 14px;
        font-family: DIN;
        font-weight: bold;
        color: #3a84ef;
      }
    }
  }
  .floor {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
  }
 ::v-deep .el-collapse-item__wrap {
    margin-bottom: 15px;
  }
 ::v-deep .el-collapse-item__wrap {
    border: none;
  }
 ::v-deep .el-collapse {
    border: none;
    margin-top: 10px;
  }
 ::v-deep .el-collapse-item {
    position: relative;
  }
 ::v-deep .el-collapse-item__header {
    border-radius: 6px;
    border: none;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    width: 1px;
  }
 ::v-deep .el-dialog__headerbtn {
    // display: none;
  }
  .content {
    &:hover {
    }
  }
  .area {
    ::v-deep .el-input__inner {
      padding-left: 40px !important;
    }
  }
  .houseType {
    ::v-deep .el-input__inner {
      padding-left: 65px !important;
    }
  }
}
</style>